<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('NewBee商城-个人中心','personal')">
</head>
<link th:href="@{/mall/css/bootstrap-modal.css}" rel="stylesheet">
<body>
<header th:replace="mall/header::header-fragment"></header>
<!-- nav -->
<nav th:replace="mall/header::nav-fragment"></nav>

<!-- personal -->
<div id="personal">
    <div class="self-info center">
        <!-- sidebar -->
        <div th:replace="mall/personal-sidebar::sidebar-fragment"></div>

        <div class="intro fr">
            <div class="grzlbt ml40">我的资料 <a href="##" class="editMember"
                                                 style="color:#1baeae;margin-left: 600px;">更改个人信息</a>
            </div>
            <!-- 昵称使用 name 字段 -->
            <div class="info_item ml40"><span>昵称</span><span
                    th:text="${member.name}">newbee-mall</span>
            </div>
            <div class="info_item ml40"><span>手机号</span><span
                    th:text="${member.phone}">newbee-mall</span>
            </div>
            <div class="info_item ml40"><span>密码</span><span
                    th:text="${member.password!=''?'******':'无'}">******</span>
            </div>
            <!-- 个性签名使用 description 字段 -->
            <div class="info_item ml40"><span>个性签名</span><span
                    th:text="${member.description==''?'无':member.description}">newbee-mall</span>
            </div>
            <!-- 收货地址使用 addressDetail 字段 -->
            <div class="info_item ml40"><span>收货地址</span><span
                    th:text="${member.addressDetail==''?'无':member.addressDetail}">newbee-mall</span></span>
            </div>
        </div>
        <div class="clear"></div>
    </div>

    <div class="content">
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="personalInfoModal" tabindex="-1" role="dialog"
             aria-labelledby="personalInfoModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"  aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h6 class="modal-title" id="personalInfoModalLabel">个人信息修改</h6>
                    </div>
                    <div class="modal-body">
                        <form id="personalInfoForm">
                            <div class="form-group">
                                <label for="nickName" class="control-label">昵称:</label>
                                <input type="hidden" id="userId" th:value="${member.id}">
                                <input type="text" class="form-control" id="nickName" name="name"
                                       placeholder="请输入昵称" th:value="${member.name}"
                                       required="true">
                            </div>
                            <div class="form-group">
                                <label for="phone" class="control-label">手机号:</label>
                                <input type="text" class="form-control" id="phone" name="phone"
                                       placeholder="请输入手机号" th:value="${member.phone}"
                                       required="true">
                            </div>
                            <div class="form-group">
                                <label for="description" class="control-label">个性签名:</label>
                                <input type="text" class="form-control" id="description" name="description"
                                       placeholder="请输入个性签名" th:value="${member.description}"
                                       required="true">
                            </div>
                            <div class="form-group">
                                <label for="addressDetail" class="control-label">收货地址:</label>
                                <input type="text" class="form-control" id="addressDetail" name="addressDetail"
                                       placeholder="请输入收货地址" th:value="${member.addressDetail}"
                                       required="true">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="saveButton" th:data-id="${member.id}">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal -->
    </div>
</div>

<div th:replace="mall/footer::footer-fragment"></div>

<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 3 -->
<script th:src="@{/mall/js/bootstrap3.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<script th:src="@{/admin/plugins/sweetalert2/sweetalert2.all.min.js}"></script>
<script th:src="@{/mall/js/personal.js}" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        // 监听所有商品链接点击事件，假设所有商品链接都在 #flash, #recommend 这类容器内
        // 你可以根据实际结构调整选择器
        $("#flash, #recommend, #sub_banner").on("click", "a", function(event) {
            var $link = $(this);
            var href = $link.attr("href");
            var id = $link.data("id");
            var name = $link.data("name");

            // 如果没有data-id，尝试从href中提取数字ID，假设URL是item/detail/123这种格式
            if (!id && href) {
                var match = href.match(/(\d+)/);
                if (match) {
                    id = match[1];
                }
            }

            if (!name) {
                // 如果没有data-name，可以用链接文本或空字符串
                name = $link.find(".name").text() || $link.text() || "";
            }

            var eventData = {
                productId: id || "unknown",
                productName: name || "unknown",
                timestamp: new Date().toISOString()
            };

            // 发送 Ajax 请求
            $.ajax({
                url: '/api/track/click',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(eventData),
                success: function() {
                    console.log("点击事件已发送：", eventData);
                },
                error: function(err) {
                    console.error("点击事件发送失败：", err);
                }
            });
        });
    });
</script>
</body>
</html>